<template>
  <div class="chptcha-box"></div>
</template>

<script>
export default {
  name: 'TestChptcha',
  data() {
    return {};
  },
  mounted() {
    let dom = document.querySelector('.chptcha-box');
    let chptcha = window._dx.Captcha(dom, {
      appId: '12610a3853150e888ccd0c6d4c415626', // 可以官网申请(这个是复制的其它例子的appId)
      // path: 'http://localhost:8314',
      // apiServer: 'http://localhost:8314',
      // constIDServer: 'http://localhost:8314/udid/c1',
      // constID_js: '/cdn/chptcha/const-id.js', // 这个没有，会去请求顶象的CDN文件
      // ua_js: '/cdn/chptcha/greenseer.js', // 这个没有，会去请求顶象的CDN文件
      // 下面开始自定义样式 customStyle
      customStyle1: {
        bar: {
          // 滑块及提示区域
          normalTextColor: 'pink', // bar-inform中 .basic_lang 处的文字颜色 eg：加载中等文字 lang
          normalBgColor: 'blue', // 滑块背景色
          normalBdColor: '', // 滑块边框色
          slidingBgColor: 'lime', // 滑动区域的背景颜色
          slidingBdColor: 'red', // 滑动区域的边框颜色
          hoverHideText: true, // hover时隐藏滑块上的提示文字 eg: 拖动左侧滑块至正确缺口 ie8及以下不支持
          successTextColor: 'red', // 验证成功时提示文字的颜色
          successIcon: '', // 验证成功时的图片提示 默认从container里取
          successBgColor: '', // 验证成功时 bar的背景颜色
          successBdColor: '', // 验证成功时 bar的边框颜色
          failBgColor: '', // 验证失败后滑动后区域的背景颜色
          failBdColor: '' // 验证失败后滑动后区域的边框颜色
        },
        bgColor: 'red', // box的背景颜色 即验证码图片和滑块的容器
        slider: {
          // 滑块
          normalBgSrc: '/drug.png', // 滑块图片
          hoverBgSrc: '/title.jpg', // img_slider_hover
          focusBgSrc: '', // img_slider_focus
          loadingBgSrc: '', // img_slider_loading_bg
          errorBgSrc: '', // img_slider_error
          loadingGifSrc: '' // img_slider_loading_gif
        }
      },
      customLanguage: {
        init_inform: '拖动一下', // <-- 初始化时的提示文案
        slide_inform: '向右向右' // <-- 滑块中的提示文案
      },
      success: (token) => {
        console.log(token);
      }
    });
    console.log(chptcha.options);
  }
};
</script>

<style lang="scss" scoped>
.chptcha-box {
  width: 300px;
  height: 300px;
  margin: auto;
  background-color: chocolate;
}
</style>
